<template>
  <div id="home-swiper" v-if="banner && banner.length > 0">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in banner"><img :src="item.image" alt="" :key="item.image"></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css';
  import { swiper, swiperSlide } from 'vue-awesome-swiper';

  export default {
    name: "HomSwiper",
    components: {
      swiper,
      swiperSlide
    },
    data(){
      return {
        swiperOptions: {
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
            stopOnLastSlide: false
          },
          loop: true,
          pagination: {
            el: '.swiper-pagination'
          },
        }
      };
    },
    props: {
      banner: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    }
  }
</script>

<style scoped>
  .swiper-wrapper .swiper-slide img{
    width: 100%;
  }
  #home-swiper{
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;/* 两种都可以 */
    background-color: white;
  }
  /deep/ .swiper-pagination-bullet-active {
    width: 18px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 20px;
  }
</style>